<template>
  <div class="open-dialog">
    <je-tabs v-model:activeKey="activeKey" @change="changeTab">
      <je-tab-pane key="RapidAuthorization">
        <template #tab>
          <span>快速授权</span>
        </template>
        <RapidAuthorization
          ref="RapidAuthorization"
          :current-func-id="currentFuncId"
          :current-func-code="currentFuncCode"
          :parent-modal="parentModal"
          @isChange="isChangeCb"
        />
      </je-tab-pane>
      <!-- <je-tab-pane key="AuthorizationField">
        <template #tab>
          <span>字段授权</span>
        </template>
        <AuthorizationField
          ref="AuthorizationField"
          :current-func-id="currentFuncId"
          :current-func-code="currentFuncCode"
          :parent-modal="parentModal"
          @isChange="isChangeCb"
        />
      </je-tab-pane> -->
      <!-- <je-tab-pane key="DictionaryAuthorization">
        <template #tab>
          <span>字典授权</span>
        </template>
        <DictionaryAuthorization
          ref="DictionaryAuthorization"
          :current-func-id="currentFuncId"
          :current-func-code="currentFuncCode"
          :parent-modal="parentModal"
          @isChange="isChangeCb"
        />
      </je-tab-pane> -->
      <je-tab-pane key="RoleSQLAuthorization">
        <template #tab>
          <span>角色SQL授权</span>
        </template>
        <RoleSQLAuthorization
          ref="RoleSQLAuthorization"
          :current-func-id="currentFuncId"
          :current-func-code="currentFuncCode"
          :parent-modal="parentModal"
          @isChange="isChangeCb"
        />
      </je-tab-pane>
      <je-tab-pane key="SQLAuthorization">
        <template #tab>
          <span>SQL授权</span>
        </template>
        <SQLAuthorization
          ref="SQLAuthorization"
          :current-func-id="currentFuncId"
          :current-func-code="currentFuncCode"
          :parent-modal="parentModal"
          @isChange="isChangeCb"
        />
      </je-tab-pane>
      <je-tab-pane key="ControlField">
        <template #tab>
          <span>控制字段</span>
        </template>
        <ControlField
          ref="ControlField"
          :current-func-id="currentFuncId"
          :current-func-code="currentFuncCode"
          :parent-modal="parentModal"
          @isChange="isChangeCb"
        />
      </je-tab-pane>
    </je-tabs>
  </div>
</template>

<script>
  import { defineComponent, onUnmounted, reactive, ref, toRefs } from 'vue';

  import { Tabs } from '@jecloud/ui';

  import RapidAuthorization from './rapid-authorization/index.vue';
  // import AuthorizationField from './authorization-field/index.vue';
  // import DictionaryAuthorization from './dictionary-authorizatio/index.vue';
  import RoleSQLAuthorization from './role-sql-authorization/index.vue';
  import SQLAuthorization from './sql-authorization/index.vue';
  import ControlField from './control-field/index.vue';
  import VueEvent from '@/helper/model/event';

  export default defineComponent({
    name: 'OpenDialog',
    components: {
      RapidAuthorization,
      // AuthorizationField,
      // DictionaryAuthorization,
      RoleSQLAuthorization,
      SQLAuthorization,
      ControlField,
      JeTabs: Tabs,
      JeTabPane: Tabs.TabPane,
      // JeModal: Modal,
    },
    props: {
      funcId: {
        type: String,
        default: '',
      },
      funcCode: {
        type: String,
        default: '',
      },
      parentModal: String,
    },
    setup(props) {
      // 当前点击的Tab签
      const activeKey = ref('');

      setTimeout(() => {
        // 初始为快速查询
        activeKey.value = 'RapidAuthorization';
      });
      let metaKey = 'RapidAuthorization';
      const currentFuncId = ref(props.funcId); // 当前id
      const currentFuncCode = ref(props.funcCode); // 当前code

      // 默认数据
      const state = reactive({
        currentFuncId,
        currentFuncCode,
        activeKey,
      });

      // 切换面版
      let nextTab = '';
      // 设置实例
      const AuthorizationField = ref();
      const ControlField = ref();
      const DictionaryAuthorization = ref();
      const RapidAuthorization = ref();
      const RoleSQLAuthorization = ref();
      const SQLAuthorization = ref();
      // 切换面板事件
      const changeTab = () => {
        nextTab = activeKey.value;
        activeKey.value = metaKey;
        setTimeout(() => {
          // 字段授权
          if (activeKey.value === 'AuthorizationField') {
            AuthorizationField.value.changeTabCb();
            // 字段控制
          } else if (activeKey.value === 'ControlField') {
            ControlField.value.changeTabCb();
            // 字典权限
          } else if (activeKey.value === 'DictionaryAuthorization') {
            DictionaryAuthorization.value.changeTabCb();
            // 快速授权
          } else if (activeKey.value === 'RapidAuthorization') {
            RapidAuthorization.value.changeTabCb();
            // 角色sql授权
          } else if (activeKey.value === 'RoleSQLAuthorization') {
            RoleSQLAuthorization.value.changeTabCb();
            // sql授权
          } else if (activeKey.value === 'SQLAuthorization') {
            SQLAuthorization.value.changeTabCb();
          }
        }, 200);
      };

      const isChangeCb = (can) => {
        // 如果返回为真才允许切换
        if (can) {
          activeKey.value = nextTab;
          metaKey = nextTab;
        }
      };

      // 订阅发生改变的
      VueEvent.on('isChange', isChangeCb);
      onUnmounted(() => {
        VueEvent.off('isChange', isChangeCb);
      });

      return {
        ...toRefs(state),
        changeTab,
        AuthorizationField,
        ControlField,
        DictionaryAuthorization,
        RapidAuthorization,
        RoleSQLAuthorization,
        SQLAuthorization,
        isChangeCb,
      };
    },
  });
</script>

<style lang="less" scoped>
  .open-dialog {
    padding-bottom: 20px;
    width: 100%;
    min-width: 1188px;
    height: 100%;
    // border: 1px solid #e6e6e6;
    border-left: none;
    // padding: 20px 30px;
    background: #fff;
    .content {
      height: 100%;
      background: red;
    }
    :deep(.ant-tabs-nav) {
      height: 40px;
      &::before {
        display: none !important;
      }
    }
    :deep(.ant-tabs) {
      height: 100%;
    }
  }
</style>
